import React, { useEffect, useRef, useState } from 'react';
import {
    Modal,
    Form,
    DatePicker,
    TimePicker,
    Radio,
    Checkbox,
    InputNumber,
    Button,
    message,
    Input,
} from 'antd';
import addData from '../utils/addData';
import timeChangeTemp from '../utils/timeChangeTemp';

const ModalComponent = ({
    modalStatus,
    setModalStatus,
    setFlagRequest,
}) => {

    const [status, setStatus] = useState(false);
    const [checked, setChecked] = useState(false);
    const formRef = useRef(null);

    const onCancel = () => {
        setModalStatus(false);
        checked && setChecked(false);
        formRef.current?.resetFields?.();
    };

    const onFinish = (values) => {
        const time = timeChangeTemp(values.ymd, values.time);
        const params = {
            body: {
                time,
                type: values.type,
                amount: values.amount
            },
            url: 'http://localhost:8088/add'
        };
        values.isCategory && (
            params.body.category = values.categoryName
        );

        addData({ ...params })
            .then(res => {
                if (res.status) {
                    setModalStatus(false);
                    formRef.current?.resetFields?.();
                    setFlagRequest(true);
                    checked && setChecked(false);
                } else {
                    message.error('请检查后重新提交');
                }
            })
            .catch(err => {

            })
    };

    const onFinishFailed = (error) => console.info(error);

    useEffect(() => {
        setStatus(modalStatus);
    }, [modalStatus]);

    const form = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
        },
    };

    return (
        <Modal
            {...form}
            visible={status}
            title={'新增账单'}
            onCancel={onCancel}
            footer={null}
        >
            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                ref={formRef}
            >
                <Form.Item
                    label={'账单年月日'}
                    name={'ymd'}
                    rules={[{ required: true, message: '请选择账单年月日' }]}
                >
                    <DatePicker key='yyyy-mm-dd' placeholder='选择日期'/>
                </Form.Item>
                <Form.Item
                    label={'账单时间'}
                    name={'time'}
                    rules={[{ required: true, message: '请选择账单时间' }]}
                >
                    <TimePicker key='hh:mm:ss' placeholder='选择时间'/>
                </Form.Item>
                <Form.Item
                    label={'类型'}
                    name={'type'}
                    rules={[{ required: true, message: '请选择账单类型' }]}
                >
                    <Radio.Group>
                        <Radio value={0}>支出</Radio>
                        <Radio value={1}>收入</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    label={'是否详细分类'}
                    name={'isCategory'}
                    rules={[{ required: false }]}
                    valuePropName="checked"
                >
                    <Checkbox onChange={(e) => setChecked(e?.target?.checked)} />
                </Form.Item>
                {
                    checked &&
                    <Form.Item
                        label={'详细分类名称'}
                        name={'categoryName'}
                        rules={[{ required: true, message: '请输入账单自定义分类名称' }]}
                    >
                        <Input />
                    </Form.Item>
                }
                <Form.Item
                    label={'账单金额'}
                    name={'amount'}
                    rules={[{ required: true, message: '请输入账单金额' }]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item>
                    <Button
                        key='submit'
                        type='primary'
                        htmlType='submit'
                        style={{ float: 'right' }}
                    >提交</Button>
                </Form.Item>
            </Form>
        </Modal >
    )
};

export default ModalComponent;